<template>
    <div class="dialog" v-show="visible">
        <div class="dialog__wrapper">
            <div class="dialog__header">
                <div class="dialog__header-title">个人信息</div>
                <div class="dialog__header-close" @click="close">
                    X
                </div>
            </div>
            <div class="dialog__body">
                <div class="dialog__body-wrapper">
                    <div class="dialog__subject">
                        <div class="dialog__subject-block"></div>
                        基本档案
                    </div>
                    <div class="dialog__info">
                        <img class="dialog__info-avatar" src="~@/assets/image/7.png" alt="" />
                        <div class="dialog__info-content">
                            <div class="dialog__info-name">{{ info.name }}</div>
                            <div class="dialog__info-row">
                                <img class="dialog__info-vip" src="~@/assets/image/8.png" alt="" />
                                <div class="dialog__info-level">1</div>
                                <div class="dialog__info-tag" v-for="(item, index) in 5" :key="index">
                                    精准客户
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dialog__row">
                        <div class="dialog__column">
                            <img class="dialog__column-icon" src="~@/assets/image/9.png" alt="" />
                            <div class="dialog__column-label">手机号：</div>
                            <div class="dialog__column-value">
                                {{ info.mainPhone }}
                            </div>
                        </div>
                        <div class="dialog__column">
                            <img class="dialog__column-icon" src="~@/assets/image/10.png" alt="" />
                            <div class="dialog__column-label">客户编码：</div>
                            <div class="dialog__column-value">
                                {{ info.vipNum }}
                            </div>
                        </div>
                        <div class="dialog__column">
                            <img class="dialog__column-icon" src="~@/assets/image/11.png" alt="" />
                            <div class="dialog__column-label">会员生日：</div>
                            <div class="dialog__column-value">
                                {{ info.birthday }}
                            </div>
                        </div>
                    </div>
                    <div class="dialog__row2">
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">性别：</div>
                            <div class="dialog__column2-value">
                                {{ info.sex == 1 ? "男" : "女" }}
                            </div>
                        </div>
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">注册时间：</div>
                            <div class="dialog__column2-value">
                                {{ info.createDate }}
                            </div>
                        </div>
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">地址：</div>
                            <div class="dialog__column2-value">
                                {{ info.address }}
                            </div>
                        </div>
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">归属门店：</div>
                            <div class="dialog__column2-value">
                                {{ info.tenantName }}
                            </div>
                        </div>
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">客户来源：</div>
                            <div class="dialog__column2-value">客户推荐</div>
                        </div>
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">绑定营销：</div>
                            <div class="dialog__column2-value">
                                消费1000送100
                            </div>
                        </div>
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">绑定咨询：</div>
                            <div class="dialog__column2-value">13576263500</div>
                        </div>
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">备注：</div>
                            <div class="dialog__column2-value">无</div>
                        </div>
                    </div>
                </div>
                <div class="dialog__body-wrapper">
                    <div class="dialog__subject">
                        <div class="dialog__subject-block"></div>
                        账户信息
                    </div>
                    <div class="dialog__row2">
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">账户余额：</div>
                            <div class="dialog__column2-value">
                                ￥{{ info.balance }}
                            </div>
                        </div>
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">
                                累计消费金额：
                            </div>
                            <div class="dialog__column2-value">
                                ￥{{ info.costAmount }}
                            </div>
                        </div>
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">
                                累计消费次数：
                            </div>
                            <div class="dialog__column2-value">
                                200
                            </div>
                        </div>
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">
                                最近一次消费时间：
                            </div>
                            <div class="dialog__column2-value">
                                2020.12.13 08:30
                            </div>
                        </div>
                        <div class="dialog__column2">
                            <div class="dialog__column2-label">
                                优惠券数量：
                            </div>
                            <div class="dialog__column2-value">2张</div>
                        </div>
                    </div>
                </div>
                <div class="dialog__body-wrapper">
                    <div class="dialog__subject">
                        <div class="dialog__subject-block"></div>
                        私密档案
                    </div>
                    <div class="dialog__row3">
                        <div class="dialog__photo-box" v-for="(item, index) in urls" :key="index">
                            <img class="dialog__photo-image" :src="item.path" alt="" />
                        </div>
                        <div class="dialog__intro">
                            <div class="dialog__intro-title">身体状况：</div>
                            <div class="dialog__intro-content">
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                            </div>
                        </div>
                    </div>
                    <el-table style="margin-top:30px" border>
                        <el-table-column label="时间" align="center"></el-table-column>
                        <el-table-column label="项目" align="center"></el-table-column>
                        <el-table-column label="实付金额" align="center"></el-table-column>
                    </el-table>
                </div>
                <div class="dialog__body-wrapper">
                    <div class="dialog__subject">
                        <div class="dialog__subject-block"></div>
                        营销
                    </div>
                    <div class="dialog__btn-box">
                        <div class="dialog__btn">
                            <img class="dialog__btn-icon" src="~@/assets/image/12.png" alt="" />
                            <div class="dialog__btn-title">发送优惠券</div>
                        </div>
                        <div class="dialog__btn">
                            <img class="dialog__btn-icon" src="~@/assets/image/13.png" alt="" />
                            <div class="dialog__btn-title">发送短信</div>
                        </div>
                        <div class="dialog__btn">
                            <img class="dialog__btn-icon" src="~@/assets/image/14.png" alt="" />
                            <div class="dialog__btn-title">拨打电话</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { get } from "@/assets/js/http.js";

export default {
    name: "member-info",
    props: {
        orderinfo: {
            type: Array,
            default: () => { }
        }
    },
    watch: {
        selection() {
            if (this.selection.length > 0) {
                this.getData();
                this.getPhoto();
            }
        }
    },
    data() {
        return {
            visible: false,
            current: 0,
            info: {},
            urls: []
        };
    },
    methods: {
        show() {
            this.visible = true;
        },
        close() {
            this.$emit("close");
            this.visible = false;
        },
        async getPhoto() {
            const result = await get({
                url: "/admin/user.RealmeritUser/getPhotoByUserId",
                params: {
                    customerId: this.selection[this.current]?.neuronCusId
                }
            });
            this.urls = result.row;
        },
        async getData() {
            const result = await get({
                url: "/admin/user.RealmeritUser/edit",
                params: {
                    id: this.selection[this.current]?.id
                }
            });
            this.info = result.row;
            console.log(this.info);
        }
    }
};
</script>

<style>
.dialog {
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.dialog__wrapper {
    width: 770px;
    height: auto;
    background: #f9f9f9;
    margin: 10vh auto;
}

.dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    padding: 0 25px;
    background: #4065e0;
}

.dialog__header-title {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
}

.dialog__header-close {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
}

.dialog__body {
    overflow: hidden;
}

.dialog__body-wrapper {
    background: #ffffff;
    border-radius: 4px;
    margin: 12px;
    padding: 14px;
}

.dialog__subject {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: #4065e0;
}

.dialog__subject-block {
    width: 2px;
    height: 17px;
    background: #4065e0;
    border-radius: 1px;
    margin-right: 8px;
}

.dialog__info {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.dialog__info-avatar {
    width: 60px;
    min-width: 60px;
    height: 60px;
}

.dialog__info-content {
    flex-grow: 1;
    margin-left: 10px;
}

.dialog__info-name {
    font-size: 14px;
    font-weight: 400;
    color: #4065e0;
}

.dialog__info-row {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.dialog__info-vip {
    width: 16px;
    min-width: 16px;
    height: 14px;
}

.dialog__info-level {
    font-size: 10px;
    font-weight: 400;
    color: #ff9724;
    padding-top: 5px;
    margin-right: 20px;
}

.dialog__info-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 20px;
    background: #eff7ff;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 400;
    color: #4065e0;
    margin-right: 7px;
}

.dialog__row {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.dialog__column {
    display: flex;
    align-items: center;
    width: 33.3%;
}

.dialog__column-icon {
    width: 12px;
    min-width: 12px;
    height: 12px;
}

.dialog__column-label {
    font-size: 12px;
    font-weight: 400;
    color: #666;
    margin-left: 7px;
}

.dialog__column-value {
    font-size: 12px;
    font-weight: 400;
    color: #222;
}

.dialog__row2 {
    display: flex;
    flex-wrap: wrap;
}

.dialog__column2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    background: #f9f9f9;
    border-radius: 3px;
    margin: 20px 20px 0 0;
    padding: 0 10px;
}

.dialog__column2-label {
    font-size: 12px;
    font-weight: 400;
    color: #666;
}

.dialog__column2-value {
    font-size: 12px;
    font-weight: 400;
    color: #222;
}

.dialog__row3 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.dialog__photo-box {
    width: 122px;
    min-width: 122px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.dialog__photo-image {
    display: block;
    width: 122px;
    height: 122px;
}

.dialog__photo-title {
    font-size: 12px;
    font-weight: 400;
    color: #222222;
    text-align: center;
    margin-top: 12px;
}

.dialog__intro {
    width: 100%;
    border: 1px dashed #ebebeb;
    padding: 10px;
}

.dialog__intro-title {
    color: #4065e0;
    font-size: 12px;
}

.dialog__intro-content {
    color: #222222;
    font-size: 12px;
    word-wrap: break-word;
    word-break: break-all;
    margin-top: 10px;
}

.dialog__btn-box {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.dialog__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 35px;
    background: #4065e0;
    border-radius: 18px;
    margin-right: 37px;
    cursor: pointer;
}

.dialog__btn-icon {
    width: 18px;
    min-width: 18px;
    height: 14px;
}

.dialog__btn-title {
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    margin-left: 4px;
}
</style>